<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约服务</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>预约服务</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="guide.html">垃圾分类指南</a></li>
                <li><a href="recycling.html">回收点查询</a></li>
                <li><a href="feedback.html">用户反馈</a></li>
                <li><a href="activities.html">活动宣传</a></li>
                <li><a href="statistics.html">数据统计</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>预约回收服务</h2>
        <form id="appointmentForm">
            <label for="date">选择日期：</label>
            <input type="date" id="date" required>
            <label for="time">选择时间：</label>
            <input type="time" id="time" required>
            <button type="submit">提交预约</button>
        </form>
        <div id="confirmationMessage" style="display:none; margin-top:10px; color:green;">
            预约成功！感谢您的参与。
        </div>
    </main>
    <footer>
        <p>&copy; 2024 垃圾回收服务. 保留所有权利.</p>
    </footer>

    <script>
        document.getElementById('appointmentForm').addEventListener('submit', function(event) {
            event.preventDefault();
            document.getElementById('confirmationMessage').style.display = 'block';
            this.reset(); // 重置表单
        });
    </script>
</body>
</html>